<template>
  <div class="index">
    <!--    左侧-->
    <div class="index-left">
      <div class="index-side-bar">
        <img
          src="../../assets/pics/slogan.png"
          alt=""
          style="
            width: 50%;
            height: 50%;
            margin-left: 27px;
            margin-top: 30px;
            margin-bottom: 20px;
          "
        />
      </div>
      <el-row class="tac">
        <el-col>
          <el-menu
            default-active="1"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            background-color="#1c1c1e"
            text-color="#fff"
            active-text-color="#ffd04b"
            style="width: 100%"
          >
            <el-menu-item index="1">
              <i class="el-icon-location"></i>
              <span slot="title">商品管理</span>
            </el-menu-item>
            <el-menu-item index="2">
              <i class="el-icon-s-goods"></i>
              <span slot="title">货品管理</span>
            </el-menu-item>
            <el-menu-item index="3">
              <i class="el-icon-shopping-cart-1"></i>
              <span slot="title">进货管理</span>
            </el-menu-item>
            <el-menu-item index="4">
              <i class="el-icon-unlock"></i>
              <span slot="title">退货管理</span>
            </el-menu-item>
            <el-menu-item index="5">
              <i class="el-icon-s-home"></i>
              <span slot="title">库房管理</span>
            </el-menu-item>
            <el-menu-item index="6">
              <i class="el-icon-menu"></i>
              <span slot="title">业务管理</span>
            </el-menu-item>
            <el-menu-item index="7">
              <i class="el-icon-menu"></i>
              <span slot="title">个人资料</span>
            </el-menu-item>
            <!--            <el-menu-item v-for="route in routes"></el-menu-item>-->
          </el-menu>
        </el-col>
      </el-row>
    </div>
    <!--    右侧-->
    <div class="index-right">
      <div class="index-header">
        <v-head></v-head>
      </div>
      <!--      下面这个div 如果不要二级菜单 例如只需要表格或填写表单 可以直接删去-->
      <div class="index-container">
        <!--        菜单栏-->
        <!--        <div class="index-menu"></div>-->
        <!--        &lt;!&ndash;        主面板&ndash;&gt;-->
        <!--        <div class="index-content"></div>-->
        <el-tabs
          :tab-position="'left'"
          type="border-card"
          class="el-tabs"
          style="width: 100%"
        >
          <el-tab-pane label="首页" name="main">
            <HomeView />
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import vHead from "../../components/HeaderView.vue";
import HomeView from "@/views/customer/homeView";
export default {
  name: "customerMain",
  components: {
    HomeView,
    vHead,
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>

<style lang="scss" scoped>
.index {
  width: 100%;
  height: 100%;
  display: flex;

  .index-left {
    position: relative;
    width: 150px;
    height: 100%;
    font-size: 14px;
    background-color: #1c1c1e;

    .index-side-bar-container {
      background-color: black;
    }
  }

  .index-right {
    position: relative;
    width: calc(100% - 150px);
    height: 100%;
    background-color: #e8eaed;

    .index-header {
      //width: calc(100% - 150px);
      width: 100%;
      height: 55px;
      background-color: #ffffff;
      box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
      box-sizing: border-box;
      position: absolute;
    }

    .index-container {
      width: 100%;
      //height: 100%;
      height: calc(100% - 55px);
      display: flex;
      padding-top: 50px;

      .el-tabs {
      }

      .index-content {
        width: 100%;
        height: calc(100% - 55px);
        padding-top: 9px;
        font-size: 16px !important;
      }

      .content-container {
        height: calc(100% - 90px);
        margin: 3px 5px 10px 5px;
        overflow-y: scroll;
        background-color: #ffffff;
      }

      .content-container::-webkit-scrollbar {
        display: none;
      }
    }
  }
}
</style>
